<template>
	<view class="container">
		<!-- #ifdef APP-PLUS || H5 -->
		<view class="coloes" @tap="gobard">
			<uni-icons custom-prefix="custom-icon" type="closeempty" size="30"></uni-icons>
		</view>
		<!-- #endif -->

		<swiper :vertical="true" style="height: 100vh;">
			<swiper-item>
				<view class="login">
					<view class="img">
						<image src="http://mall.shyvv.com/static/img/mall-log.b7942df5.png" mode=""></image>
					</view>
					<view style="text-align: center;font-size: 35rpx;padding: 10rpx;">
						<text>注册Small账号</text>
					</view>

					<view class="LoginType">
						<view :class="{color:registerToggle==0}" @tap="RegisterToggle(0)">用户注册</view>
						<view :class="{color:registerToggle==1}" @tap="RegisterToggle(1)">手机号注册</view>
					</view>

					<view class="loginInput">
						<view><input class="uni-input" placeholder="请输入账号~" v-model="RegisteParams.username" /></view>
						<view>
							<input class="uni-input" password placeholder="请输入密码~" v-model="RegisteParams.password" />
						</view>
						<view>
							<input class="uni-input" password placeholder="重复密码~" v-model="repetitionPWd" />
						</view>
						<view style="display: flex;">
							<label class="radio">
								<radio :checked="checkedLaw" @click="checkedLaw=true" />
								<!-- <checkbox  :checked="checkedLaw"  @click="checkedLaw=true" ></checkbox> -->
								我已阅读法律法则
							</label>
						</view>
						<view>
							<button type="primary" @click="affirmRegiste">注册</button>
						</view>
					</view>

					<!-- 其他方法 -->
					<ElseType></ElseType>

					<view style="text-align: center;">
						<uni-icons custom-prefix="custom-icon" type="bottom" size="30"></uni-icons>
					</view>
				</view>
			</swiper-item>

			<swiper-item>
				<!-- 登录 -->
				<view class="login">
					<view class="top">
						<uni-icons custom-prefix="custom-icon" type="top" size="30"></uni-icons><br>
						<text>没有账号，去注册</text>
					</view>
					<view class="img">
						<image src="http://mall.shyvv.com/static/img/mall-log.b7942df5.png" mode=""></image>
					</view>
					<view style="text-align: center;font-size: 35rpx;padding: 30rpx;">
						<text>使用SMLL账号登录官网</text>
					</view>

					<view class="LoginType">
						<view :class="{color:loginToggle==0}" @tap="LoginToggle(0)">用户登录</view>
						<view :class="{color:loginToggle==1}" @tap="LoginToggle(1)">手机号登录</view>
					</view>

					<view class="loginInput">
						<view><input class="uni-input" placeholder="请输入账号~" v-model="LoginParams.username" /></view>
						<view>
							<input class="uni-input" password placeholder="请输入密码~" v-model="LoginParams.password" />
						</view>
						<view style="display: flex;justify-content: space-between;">
							<text>忘记密码?</text>
							<text>免登录</text>
						</view>
						<view>
							<button type="primary" @click="affimrLogin">登录</button>
						</view>
					</view>

					<!-- 其他方法 -->
					<ElseType></ElseType>
				</view>
			</swiper-item>
		</swiper>

	</view>
</template>

<script>
	import ElseType from '../../components/ElesType.vue'
	export default {
		components: {
			ElseType
		},
		data() {
			return {
				loginToggle: 0,
				showPassword: false,
				registerToggle: 0,
				checkedLaw: false,
				LoginParams: {
					password: "",
					username: ""
				},
				RegisteParams: {
					password: "",
					username: ""
				},
				repetitionPWd: ""
			}
		},
		onLoad() {
			this.getClientHigth()
		},
		methods: {
			RegisterToggle(index) {
				if (index == 1) {
					uni.showToast({
						title: '敬请期待！',
						icon: 'loading'
					})
				}
			},
			LoginToggle(index) {
				if (index == 1) {
					uni.showToast({
						title: '敬请期待！',
						icon: 'loading'
					})
				}
			},
			gobard() {
				uni.navigateBack({
					delta: 1
				})
			},
			getClientHigth() {
				const res = uni.getSystemInfoSync()
				const system = res.platform;
				// if (res.platform == "android") {
				// 	this.showColes = true
				// }
			},
			affimrLogin() {
				if (this.LoginParams.username == "") {
					uni.showToast({
						title: "请输入账号！",
						icon: 'none'
					})
				} else if (this.LoginParams.password == "") {
					uni.showToast({
						title: "请输入密码！",
						icon: 'none'
					})
				} else {
					this.$api.user.UserLogin(this.LoginParams).then(res => {
						if (res.code == 200) {
							this.$store.commit("GETTOKEN", res.data.token)
							this.$store.dispatch('getUserInfo')
							uni.switchTab({
								url: '/pages/index/index'
							})
						} else {
							uni.showToast({
								title: res.message,
								icon: 'none'
							})
						}
					})

				}
			},
			affirmRegiste() {
				if (this.RegisteParams.username == "") {
					uni.showToast({
						title: "请输入账号！",
						icon: 'none'
					})
				} else if (this.RegisteParams.password == "") {
					uni.showToast({
						title: "请输入密码！",
						icon: 'none'
					})
				} else if (this.repetitionPWd == "") {
					uni.showToast({
						title: "请输入重复密码！",
						icon: 'none'
					})
				} else if (this.RegisteParams.password != this.repetitionPWd) {
					uni.showToast({
						title: "密码不一致！",
						icon: 'none'
					})
				} else if (this.checkedLaw == false) {
					uni.showToast({
						title: "请勾选！",
						icon: 'none'
					})
				} else {
					let regular = /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,16}$/;
					if (!regular.test(this.repetitionPWd)) {
						uni.showToast({
							title: "密码必须包含字母和数字的，且6~18位之间",
							icon: 'none'
						})
						return;
					}
					this.$api.user.registerByUsername(this.RegisteParams).then(res => {
						if (res.code == 200) {
							console.log(res);
							uni.showToast({
								title: "注册成功,下滑登录",
							})
						} else {
							uni.showToast({
								title: res.message,
							})
						}
					})
					this.RegisteParams = Object.assign(this._data.RegisteParams, this.$options.data().RegisteParams)
					this.repetitionPWd = ""
					this.checkedLaw = false
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		width: 100vw;
		height: 100vh;

		.coloes {
			padding: 30rpx;
		}

		.login {
			// height: 1200rpx;
			width: 100%;

			// border: 1px solid rebeccapurple;
			.top {
				text-align: center;
				padding-bottom: 50rpx;
			}

			.img {
				display: flex;
				justify-content: center;

				image {
					height: 150rpx;
					width: 150rpx;
				}
			}

			.LoginType {
				height: 80rpx;
				width: 100%;
				border: 1px solid gainsboro;
				margin-top: 12rpx;
				display: flex;
				// align-items: center;
				line-height: 80rpx;
				text-align: center;

				view:nth-child(1) {
					border-right: 1px solid gainsboro;
				}

				view {
					flex: 1;
				}
			}

			.loginInput {
				width: 80%;
				// height: 300rpx;
				margin: 10rpx auto;

				.uni-input {
					border: 1px solid gainsboro;
					height: 80rpx;
					border-radius: 10rpx;
				}

				.uni-input-placeholder {
					padding-left: 15rpx;
				}

				view {
					margin: 30rpx 0;
				}
			}
		}




		.color {
			color: #409eff;
		}
	}
</style>
